<template>
	<view class="container">
		<view class="container-box">
			<view class="container-box-center">
				<view class="logos">
					<image src="../../static/img/logos.png" mode="widthFix"></image>
				</view>
				<view class="w-text">
					<text>您好，欢迎来到弘兆软件</text>
				</view>
				<view class="login-box">
					<view class="list">
						<view class="list-call">
							<image class="img" src="/static/img/1.png"></image>
							<input class="biaoti" v-model="uid" type="text" placeholder="账号" />
						</view>
						<view class="list-call">
							<image class="img" src="/static/img/2.png"></image>
							<input class="biaoti" v-model="password" type="password" placeholder="密码" password="true" />
						</view>
					</view>
				</view>
				<view class="remember">
					<view class="remember-psw">
						<checkbox-group class="checkbox">
							<label style="line-height: 40upx;color: #FFAC60;font-size: 24upx;">
								<checkbox style="transform:scale(0.8)" value="psw" :checked='rememberPsw'
									@tap="rememberPsw =!rememberPsw" color="#FFAC60" />记住账号密码
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="denh">
					<button type="primary" style="background: #FFAC60;" class="dlbutton" @tap="bindLogin"
						:loading="loading" hover-class="dlbutton-hover">登录</button>
				</view>
				<view class="saoma">
					<view @tap="openRegister">扫码配置网络</view>
				</view>
				<view class="saoma">
					<view>版本号:{{Version}}</view>
				</view>
			</view>

            <uni-popup ref="configPopup" :mask-click="false" type="bottom">
                <view class="config_popup">
                    <view class="config_title">服务/更新地址配置</view>
                    <view class="config_item">
                        <text>服务地址:</text>
                        <input type="text" v-model="baseUrl" />
                        <text @click="updateAdd('baseUrl')" class="iconfont icon-saoma"></text>
                    </view>

                    <view class="config_item">
                        <text>更新地址:</text>
                        <input type="text" v-model="updateUrl" />
                        <text @click="updateAdd('updateUrl')" class="iconfont icon-saoma"></text>
                    </view>

                    <view class="config_button">
                        <button @click="save" hover-class="hover_save">确认</button>
                        <button @click="close" >取消</button>
                    </view>
                </view>
            </uni-popup>

		</view>
	</view>
</template>
<script>
	import Vue from 'vue'
	 
	export default {
		data() {
			return {
				token: '',
				rememberPsw: true,
				uid: '',
				password: '',
				dk: '',
				loading: false,
				qx: '',
				baseUrl: '',
				updateUrl: '',
				Version:''
			};
		},

		onLoad() {
			//获取缓存账号
			this.dk = this.$baseURL
			this.Version = uni.getStorageSync('bbh')
			const uid = uni.getStorageSync('uid');
			const password = uni.getStorageSync('password');
			if (uid && password) {
				this.uid = uid;
				this.password = password;
			} else {
				this.uid = "";
				this.password = "";
			}

		},
		methods: {
			bindLogin() {
				
				this.token = this.Random();
				if (this.uid == '') {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					});
					return;
				}
				if (this.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}

                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    uni.showToast({
                        title: '登录成功!',
                        icon: 'none'
                    })
                }, 1500)


                return
                // 已下是网络请求的
				uni.request({
					url: `${this.$baseURL}userLogin.aspx`,
					data: {
						username: this.uid,
						password: this.password,
						token: this.token
					},
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						// console.log(res)
						if (res.statusCode == 404) {
							uni.showToast({
								title: '网络配置异常，请重新扫码激活',
								icon: 'none'
							});
							return;
						}

						if (res.data.code !== 200) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});

						} else {
							uni.setStorageSync('token', this.token);
							uni.setStorageSync('username', this.uid);
							uni.setStorageSync('uid', this.uid);
							uni.setStorageSync('password', this.password);
							uni.reLaunch({
								url: '/pages/home/index'
							})
						}
					},
					fail: (res) => {
						if (res.errMsg.indexOf('fail') > -1) {
							uni.showToast({
								title: '网络配置异常，请重新扫码激活',
								icon: 'none'
							})
						}
					},
					complete: () => {
						this.loading = false;
					}
				});
			},
			openRegister() {
                this.updateUrl = uni.getStorageSync('updateUrl') ? uni.getStorageSync('updateUrl') : ''
                this.baseUrl = uni.getStorageSync('baseUrl') ? uni.getStorageSync('baseUrl') : ''
                this.$refs.configPopup.open('center')
                return
				uni.scanCode({
					onlyFromCamera: false,
					scanType: ['qrCode'],
					success: res => {

					}
				})
			},

            save() {
                uni.setStorageSync('updateUrl', this.updateUrl);
                uni.setStorageSync('baseUrl', this.baseUrl);
                this.$refs.configPopup.close()
            },
            close() {
                this.updateUrl = uni.getStorageSync('updateUrl') ? uni.getStorageSync('updateUrl') : ''
                this.baseUrl = uni.getStorageSync('baseUrl') ? uni.getStorageSync('baseUrl') : ''
                this.$refs.configPopup.close()
            },
            updateAdd(type) {
                console.log('== 11 ', this[type])
                return
                uni.scanCode({
					onlyFromCamera: false,
					scanType: ['qrCode', 'barCode'],
					success: res => {
                        console.log('== 11 ', res.result)
                        if (res.result) {
                            this[type] = res.result
                        }
					}
				})
            },

            // 
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '17855898445' //仅为示例
				});
			},
			Random() {
				var time = new Date();
				var num = time.getTime() + Date.now().toString(36);
				return num;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		background: #FFAC60;
		background-image: url('../../static/img/bc.png');
		background-size: 100% 100%;
		position: relative;

		.container-box {
			width: 35%;
			height: 80%;
			border-radius: 10rpx;
			background: #fff;
			position: absolute;
			z-index: 9999999;
			top: 10%;
			right: 5%;
			display: flex;
			justify-content: center;
			align-items: center;

			.container-box-center {
				width: 90%;
				height: 84%;

				// border: 1px solid;
				.logos {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 160rpx;
						height: 100%;
					}
				}

				.w-text {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 20rpx 0;
					font-size: 26rpx;
					color: #000;
				}

				.login-box {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.remember {
					padding-top: 20rpx;
					padding-left: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.denh {
					display: flex;
					justify-content: center;
					align-items: center;
					// padding-top: 20rpx;
				}

				.saoma {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFA800;
					padding-top: 44rpx;
				}
			}
		}
	}

	.toubu,
	.dlbutton {
		background: #FFAC60;
	}

	.header,
	.header image {
		width: 161upx;
		height: 161upx;
	}

	.content,
	.list,
	.list-call,
	.xieyi {
		display: flex;
		flex-direction: column;
	}

	.remember-psw,
	.dlbutton {
		width: 80%;
	}

	.toubu,
	.xinxi,
	.xinxi1 {
		width: 100%;
	}

	.xinxi,
	.xinxi1 {
		position: absolute;
		bottom: 40upx;
		text-align: center;
		color: #000;
		font-size: 20upx;
	}

	.content,
	.xieyi {

		justify-content: center;
	}

	.content,
	.header {
		overflow: hidden;
	}

	.header,
	.dlbutton {
		margin-left: auto;
		margin-right: auto;
	}

	.dlbutton {
		margin-top: 40upx;
	}

	.xieyi {
		margin-top: 100upx;
	}

	.list-call,
	.xieyi {
		flex-direction: row;
		align-items: center;
	}

	.xieyi,
	.list-call .img {
		height: 40upx
	}

	.remember-psw {
		margin-top: 10upx;
		// margin-left: 60%;
		position: relative;
	}

	.toubu {
		width: 100%;
		height: 440rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.header {
		margin-top: 30upx;
	}

	.list {
		padding-top: 50upx;
		padding-left: 70upx;
		padding-right: 70upx;
	}

	.list-call {
		justify-content: space-between;
		height: 100upx;
		color: #333333;
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
	}

	.list-call .img {
		width: 40upx
	}

	.list-call .biaoti {
		flex: 1;
		text-align: left;
		font-size: 32upx;
		margin-left: 16upx;
	}

	.dlbutton {
		color: #FFFFFF;
		font-size: 34upx;
		height: 72upx;
		border-radius: 10upx;
		line-height: 72upx;
		text-align: center;
	}

	.xieyi {
		font-size: 30upx;
		color: #FFA800;
		text-align: center;
		;
		line-height: 40upx;
	}

	.xieyi text {
		font-size: 24upx;
		margin-left: 15upx;
		margin-right: 15upx;
	}

	.xinxi1 {
		bottom: 10upx;
	}


    .config_popup {
        width: 50vw;
        background: #fff;
        border-radius: 15rpx;
        padding: 40rpx;

        .config_title {
            margin-bottom: 40rpx;
            font-size: 50rpx;
        }

        .config_item {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            font-size: 40rpx;
            input {
                flex: 1;
                border: 1rpx solid #ccc;
                padding: 10rpx 20rpx;
                margin: 0 20rpx;
            }
            .iconfont {
                font-size: 50rpx;
            }
        }

        .config_button {
            display: flex;
            align-items: center;
            margin-top: 40rpx;

            button {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 200rpx;
                height: 80rpx;
            }

            button:nth-child(1) {
                background: #009fd9;
                color: #fff;
            }
            .hover_save {
                background: #047fac !important;
                
            }
        }
    }
</style>